<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demo of OwlCarousel2 which's nav on side">
	<meta name="keywords" content="owl, owl carousel2, demo, nav">
	<meta name="author" content="Steper Kuo">
	<title>Demo: Owl carousel2 - drag and drop</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<link rel="stylesheet" href="styles/owl.carousel.min.css">
	<link rel="stylesheet" href="styles/owl-navOnSide.css">
	<style data-toggle="previewCode" data-target="#demoWrap" data-collapse="on" type="text/css">
		/* Demo's CSS here */
		.player
		{
			width: 100%;
		}
		.windows
		{
			list-style-type: none;
			padding: 0;
		}
		.window
		{
			float: left;
			width: 40%;
			height: 240px;
			border: 1px solid black;
			background-color: lightgray;
		}
		.window.drop-able
		{
			border: 1px solid red;
		}
		.owl-carousel .item:hover
		{
			cursor: move;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap" data-collapse="on">
					<p>Basic demo with nav bar on side</p>
					<!--Demo's html here-->
					<div id="owlBasicBar" class="owl-carousel">
						<div class="item" id="game_1111" draggable="true">
							<h4>1</h4>
						</div>
						<div class="item" id="game_2222" draggable="true">
							<h4>2</h4>
						</div>
						<div class="item" id="game_3333" draggable="true">
							<h4>3</h4>
						</div>
						<div class="item" id="game_4444" draggable="true">
							<h4>4</h4>
						</div>
						<div class="item" id="game_5555" draggable="true">
							<h4>5</h4>
						</div>
						<div class="item" id="game_6666" draggable="true">
							<h4>6</h4>
						</div>
						<div class="item" id="game_7777" draggable="true">
							<h4>7</h4>
						</div>
						<div class="item" id="game_8888" draggable="true">
							<h4>8</h4>
						</div>
					</div>
					<label for="switchOwlBtn">Disable owl carousel slide drag:</label>
					<button id="switchOwlBtn" onclick="switchOwl()">Switch Owl JS</button>
					<div id="playerDebug"></div>
					<div id="player" class="player clearfix">
						<ul class="windows">
							<li id="window_0" class="window">Window 0</li>
							<li id="window_1" class="window">Window 1</li>
							<li id="window_2" class="window">Window 2</li>
							<li id="window_3" class="window">Window 3</li>
						</ul>
					</div>
				</div>
				<h3 id="overview">Overview</h3>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script id="owlCarouselJS" type="text/javascript" src="scripts/owl.carousel.custom.dragdrop.js"></script>
<!--<script type="text/javascript" src="scripts/owl.carousel.custom.js"></script>-->
<!--<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>-->

<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	var dragSupport = false;
	if ('draggable' in document.createElement('span'))
	{
		dragSupport = true;
	}

	var owlOptions = {
		margin: 10,
		nav: true,
		navText: ['', ''],
		dots: false,
		loop: false,
//		mouseDrag: false,
// 		touchDrag: false,
		responsive: {
			0: {
				items: 1
			},
			320: {
				items: 2
			},
			480: {
				items: 3
			},
			768: {
				items: 4
			},
			1024: {
				items: 5
			}
		}
	};
	window.addEventListener("load", function () {
		initOwl();
	}, false);

	function initOwl()
	{
		$('#owlBasicBar').owlCarousel(owlOptions);
	}

	function switchOwl()
	{
		owlOptions.mouseDrag = false;
		$('#owlBasicBar').trigger('destroy.owl.carousel');
		$('#owlCarouselJS').remove();

		loadScript("scripts/owl.carousel.custom.js", initOwl);
	}

	window.onload = function () {
		if (dragSupport)
		{
			initDragAndDrop();
		}
	};

	function initDragAndDrop()
	{
		/*
		 1) .schedule.game 监听dragStart
		 2) drag发生时, 生成一个独立的drag对象(dom), 原有elem状态不变.
		 3) .player.window 监听drop, drop发生时, 获取gameId.
		 */
		$(".owl-carousel .item").on("dragstart", function (event) {
			event.originalEvent.dataTransfer.setData("gameId", event.target.id.split("_")[1]);
		});
		$("#player .window").on("drop", function (event) {
			event.preventDefault();
			$(this).removeClass("drop-able");
			var gameId = event.originalEvent.dataTransfer.getData("gameId");
			$("#playerDebug").text("index: " + $(this).attr("id").split("_")[1] + " gameId: " + gameId);
		}).on("dragover", function (event) {
			event.preventDefault();
		}).on("dragenter", function (event) {
			$(this).addClass("drop-able");
		}).on("dragleave", function (event) {
			$(this).removeClass("drop-able");
		});
	}
</script>

</body>
</html>